<template>
	<view class="page">
		<view class="items">
			<view class="items_left">
				<text class="bi_tian" style="color: red;">*</text>
				<text>经销商</text>
			</view>
			<u--input placeholder="请输入营业执照名称" border="surround" v-model="form.dealerName" inputAlign="right"></u--input>
		</view>
		<view class="items" @click="shengShow = true">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>所在省</text>
			</view>
			<u-picker :show="shengShow" :columns="relationshipColumns" @confirm="shengConfirm"
				@cancel="shengShow = false" keyName="label"></u-picker>
			<view class="items_rght_tips" style="display: flex;">
				<view class="">
					{{shengTips || '请选择所在省'}}
				</view>
				<view class="" style="margin:0 10rpx 0 10rpx;">
					<u-icon name="arrow-down" v-if="shengShow == false"></u-icon>
					<u-icon name="arrow-up" v-else></u-icon>
				</view>
			</view>
		</view>
		<view class="items" @click="selectshi">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>所在市</text>
			</view>
			<u-picker :show="shiShow" :columns="shiColumns" @confirm="shiConfirm" @cancel="shiShow = false"
				keyName="label"></u-picker>
			<view class="items_rght_tips">
			
				<view class="items_rght_tips" style="display: flex;">
					<view class="">
							{{shiTips || '请选择所在市'}}
					</view>
					<view class="" style="margin:0 10rpx 0 10rpx;">
						<u-icon name="arrow-down" v-if="shiShow == false"></u-icon>
						<u-icon name="arrow-up" v-else></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>开户行</text>
			</view>
			<u--input placeholder="请输入开户行" border="surround" v-model="form.kaihuhang" inputAlign="right"></u--input>
		</view>
		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>开户名称</text>
			</view>
			<u--input placeholder="请输入开户名称" border="surround" v-model="form.kaihuming" inputAlign="right"></u--input>
		</view>
		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>银行账号</text>
			</view>
			<u--input placeholder="请输入银行账号" border="surround" v-model="form.bankNum" inputAlign="right"></u--input>
		</view>
		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>联系人</text>
			</view>
			<u--input placeholder="请输入联系人" border="surround" v-model="form.person" inputAlign="right"></u--input>
		</view>
		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>联系电话</text>
			</view>
			<u--input placeholder="请输入联系电话" border="surround" v-model="form.phone" inputAlign="right"></u--input>
		</view>

		<view class="items">
			<view class="items_left">
				<text class="bi_tian">*</text>
				<text>详细地址</text>
			</view>
			<u--input placeholder="请输入详细地址" border="surround" v-model="form.address" inputAlign="right"></u--input>
		</view>
		<view class="tip" style="margin-top: 68rpx;">
			<text style="color: red; margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请如实上传您的<text
					style="color: red;">银行卡照片</text></text>
		</view>
		<yinghangka ref="yinghangka" />
		<view class="tip" style="margin-top: 68rpx;">
			<text style="color: red; margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请如实上传您的<text
					style="color: red;">营业执照</text></text>
		</view>
		<view class="" style="display: flex;">
			<yingyezhizhao ref="yingyezhizhao" />
		</view>
		<view class="tip" style="margin-top: 68rpx;">
			<text style=" margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请如实上传您的<text
					style="color: red;">门面头照片</text></text>
		</view>
		<view class="" style="display: flex;">
			<menmiantou ref="menmiantou" />
		</view>

		<view class="tip" style="margin-top: 68rpx;">
			<text style="margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请如实上传您的<text
					style="color: red;">环境照片</text></text>
		</view>
		<view class="" style="display: flex;">
			<huanjingzhao ref="huanjingzhao" />
		</view>

		<view class="tip" style="margin-top: 68rpx;">
			<text style=" margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请如实上传您的<text
					style="color: red;">其他文件</text></text>
		</view>
		<view class="" style="display: flex;">
			<qita ref="qita" />
		</view>
   <view class="checkBox">
            <!--  -->
            <u-checkbox-group @change="checkboxChange">
                <u-checkbox v-model="chktVal" size="24" label-size="14" style="margin-right: 1rpx;" label="请阅读"></u-checkbox>
            </u-checkbox-group>
            <text style="color: #2E6ADF;" @click="this.$next('/pages/xieyi/UserServiceAgreement')">《用户服务协议》</text><text>和</text><text style="color: #2E6ADF;" @click="this.$next('/pages/xieyi/PrivacyPolicy')">《隐私政策》</text>并勾选协议
        </view>
		<view class="but">
			<u-button
				:customStyle="{border:'none',background: '#0079FE',width:'686rpx',color:'#fff',height:'90rpx',fontSize:'30rpx',borderRadius:'15rpx'}"
				@click="submit">提交
			</u-button>
		</view>
	</view>
</template>

<script>
	import yinghangka from "./jing_xiao_shang_ru_zhu/uploadFile/ying_hang_ka";
	import yingyezhizhao from "./jing_xiao_shang_ru_zhu/uploadFile/ying_ye_zhi_zhao";
	import menmiantou from "./jing_xiao_shang_ru_zhu/uploadFile/men_mian_tou";
	import huanjingzhao from "./jing_xiao_shang_ru_zhu/uploadFile/huan_jing_zhao";
	import qita from "./jing_xiao_shang_ru_zhu/uploadFile/qita";
	export default {
		components: {
			yinghangka,
			yingyezhizhao,
			menmiantou,
			huanjingzhao,
			qita
		},
		data() {
			return {
				type: null,
				reg: /^\d+$/,
				chktVal:false,
				workflowWater: [],
				otherImg: [],
				form: {
					provinceId: null, //省id
					cityId: null, //市id
					dealerName: '', //经销商名称
					kaihuhang: '', //开户行
					kaihuming: '', //开户名称
					bankNum: '', //银行账号
					person: '', //联系人
					phone: '', //联系电话
					address: '', //详细地址
					bankCardImg: '', //银行账户,
					businessLicense: '', //营业执照
					doorHeader: '', //门头照
					environment: '', //环境照
					otherImg: '', //其他

				},
				// 所在省数据源
				relationshipColumns: [],
				// 所在市数据源
				shiColumns: [],
				shengTips: '', //所在省的提示文字
				shiTips: '', //所在省的提示文字
				shengShow: false, //所在省开关
				shiShow: false, //所在市开关
			}
		},
		created() {
			this.getsheng()
		},
		onLoad(options) {

		},
		methods: {
			// 示例图预览
			showImg(path) {
				console.log(path);
				uni.previewImage({
					urls: [...path]
				})
			},
			// 选择省弹框确认按钮
			shengConfirm(e) {
				this.form.provinceId = e.value[0].id
				this.shengTips = e.value[0].label
				this.shengShow = false
				// 同时获取市的数据
				console.log(e, 'eee');
				this.getshi(e.value[0].id)
			},
			// 选择市弹框确认按钮
			shiConfirm(e) {
				this.form.cityId = e.value[0].id
				this.shiTips = e.value[0].label
				this.shiShow = false
			},
			selectshi() {
				if (this.shengTips) {
					this.shiShow = true
				} else {
					this.$ToastFail('请先选择省份')
				}

			},
			// 获取省份数据源
			getsheng() {
				this.$get('/biz/ClientPersonal/getAllProvince').then(res => {
					let data = res.data.data.map(items => {
						return {
							label: items.name,
							id: items.areaId,
						}
					})
					this.relationshipColumns = [data]
				})
			},
			// 获取市的数据
			getshi(id) {
				this.$get('/biz/ClientPersonal/selectCity', {
					parentId: id

				}).then(res => {
					console.log(res, '市');
					let data = res.data.data.map(items => {
						return {
							label: items.name,
							id: items.areaId,
						}
					})
					this.shiColumns = [data]
				})
			},
			checkboxChange(e) {
				if (e.length == 1) {
					this.chktVal = true
				} else {
					this.chktVal = false
				}
			},
			// 提交
			submit() {
				if (this.$refs.yinghangka.fileList1.length <= 0) {
					this.$ToastFail('请先上银行卡照片')
					return
				}
				if (this.$refs.yingyezhizhao.fileList1.length <= 0) {
					this.$ToastFail('请先上传营业执照再提交')
					return
				}

				var arr1 = this.$refs.yinghangka.fileList1.map(d => {
					return d.url
				})
				var arr2 = this.$refs.yingyezhizhao.fileList1.map(d => {
					return d.url
				})
				var arr3 = this.$refs.menmiantou.fileList1.map(d => {
					return d.url
				})
				var arr4 = this.$refs.huanjingzhao.fileList1.map(d => {
					return d.url
				})
				var arr5 = this.$refs.qita.fileList1.map(d => {
					return d.url
				})
				this.form.bankCardImg = arr1.join(',')
				this.form.businessLicense = arr2.join(',')
				this.form.doorHeader = arr3.join(',')
				this.form.environment = arr4.join(',')
				this.form.otherImg = arr5.join(',')

				if (!this.form.dealerName) {
					this.$ToastFail('请输入经销商名称')
					return
				}
				if (!this.shengTips) {
					this.$ToastFail('请选择所在省')
					return
				}
				if (!this.shengTips) {
					this.$ToastFail('请选择所在市')
					return
				}

				if (!this.form.kaihuhang) {
					this.$ToastFail('请输入开户行')
					return
				}

				if (!this.form.kaihuming) {
					this.$ToastFail('请输入开户名称')
					return
				}

				if (!this.form.bankNum) {
					this.$ToastFail('请输入银行账号')
					return
				}

				if (!this.form.person) {
					this.$ToastFail('请输入联系人')
					return
				}

				if (!this.form.phone) {
					this.$ToastFail('请输入联系电话')
					return
				}

				if (!this.form.address) {
					this.$ToastFail('请输入详情地址')
					return
				}
				if (this.chktVal == false) {
					this.$ToastFail('请勾选协议')
					return 
				}
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '您确认要提交吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// showCancel: false,
					// 确认按钮的文字自定义
					confirmText: "确认",
					//删除字体的颜色，颜色最好是十六进制，不然程序发布上线会出问题
					confirmColor: '#ef111b',
					//取消字体的颜色
					cancelColor: '#000000',
					success: function(res) {
						//变量接this
						var that = this
						if (res.confirm) {
							// 执行确认后的操作
							that.submitApi()
						} else {
							// 执行取消后的操作
						}
					}.bind(this)
				})
			},
			async submitApi() {
				// 请求接口
				uni.showLoading({
					mask: true
				})
				this.$post('/biz/ClientPersonal/addDealer', this.form).then(res => {
					if (res.status) {
						this.$ToastFail('申请成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							}, 1000)
						})
					}
					console.log(res, 'res');
				})
			},

		}
	}
</script>

<style>
	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 100%;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
	}

	.bi_tian {
		display: inline-block;
		color: red;
		margin: 10rpx 10rpx 0 0;
	}

	.items_left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}

	.items_rght_tips {
		font-size: 28rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9D9D9D;
	}

	.page {
		overflow-y: hidden;
		width: 100%;
		/* height: 100vh; */
		background-color: #fff;
		padding: 0 30rpx 102rpx;
		box-sizing: border-box;
	}

	.tip {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
		margin-top: 24rpx;
	}

	.uploaad {
		width: 690rpx;
		/* height: 297rpx; */
		background: #F9F9F9;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top: 32rpx;
	}

	.uploaad {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.icon {
		font-size: 108rpx;
		font-family: 'Rubik-Regular, Rubik';
		font-weight: 400;
		color: #C4C4C4;
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 100%;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
	}

	.items_left {
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}

	.fenGe {
		width: 690rpx;
		height: 15rpx;
		background: #F4F4FA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.tishi {
		height: 66rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
	}

	.xie_yi {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		height: 66rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
		margin: 34rpx 0 76rpx;
	}

	.items_rght_tips {
		font-size: 28rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9D9D9D;
	}

	.but {
		/* position: fixed; */
		/* bottom: 196rpx; */
		margin-top: 30rpx;
	}

	.newuploaad {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 32rpx;
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 100%;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
	}

	.items_left {
		font-size: 26rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}

	.shilitu {
		text-align: center;
		line-height: 145rpx;
		width: 145rpx;
		height: 145rpx;
		font-size: 24rpx;
		background-color: #f4f5f7;
	}
	/* .checkBox {
	        display: flex;
	        justify-content: flex-start;
	        align-items: center;
	        font-size: 26rpx;
	        font-family: "PingFang SC";
	        font-weight: 400;
	        color: #666;
	    } */
	.checkBox {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 26rpx;
		color: #666;
	}
</style>